
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jRange : jQuery Range Selector</title>
        <link rel="stylesheet" href="jquery.range.css"> 
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="jquery.range.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:100,300' rel='stylesheet' type='text/css'>
	
    </head>
    <body>
        <div style="margin:5px;height:20px;">
            <input class="single-slider" type="hidden" value="0.0"/> </div>  
        <div style="margin:5px;height:20px;">
            <input class="range-slider" type="hidden" value="25,75"/> </div>
        <script src="prism/prism.js"></script>  
        <script type="text/javascript">
            $(document).ready(function () {
                $('.single-slider').jRange({
                    from: -2.0,
                    to: 2.0,
                    step: 0.5,
                    scale: [-2.0, -1.0, 0.0, 1.0, 2.0],
                    format: '%s',
                    width: 300,
                    showLabels: true,
                    snap: true
                });
                $('.range-slider').jRange({
                    from: 0,
                    to: 100,
                    step: 1,
                    scale: [2017/01 , 2017/02, 50, 75, 100],
                    format: '%s',
                    width: 300,
                    showLabels: true,
                    isRange: true
                });
            });
        </script>
    </body>
</html>

